﻿@{
    ViewBag.Title = "MenuList";
}
@section Head{
    <link href="~/Content/css/jquery.treeview.css" rel="stylesheet" />
    <style>
        .filetree span.folder {
            display: inline-block;
        }

        .btnSort {
            margin-left: 15px;
            font-size: 14px;
        }
        #menulist{
            float:left;width:300px;border-right:1px solid #ddd;
        }

    </style>
}
<h2 class="sub-header">菜单列表</h2>

<div>
    <h4>菜单列表 <a onclick="menuSort(0,this)" class='btnSort glyphicon glyphicon-sort text-danger'>排序</a></h4>
    <ul id="menulist" class="filetree"></ul>
    <div id="editArea" style="float:left;padding-left:20px;width:450px;">
        <h3 id="editTitle" class="title">修改菜单</h3>
        <div class="form-group hidden">
            <label>id</label>
            <input type="text" id="MenuId" name="MenuId" v-model="editedMenu.MenuId" class="form-control" />
            <input type="text" id="Sort" name="Sort" v-model="editedMenu.Sort" class="form-control" />
        </div>
        <div class="form-group hidden">
            <label>父菜单id</label>
            <input type="text" id="ParentId" name="ParentId" v-model="editedMenu.ParentId" class="form-control" />
        </div>
        <div class="form-group">
            <label>标题</label>
            <input type="text" id="MenuName" name="MenuName" v-model="editedMenu.MenuName" class="form-control" />
        </div>
        <div class="form-group">
            <label>菜单类型</label>
            <select id="MenuType" name="MenuType" v-model="editedMenu.MenuType" class="form-control">
                <option value="">请选择</option>
                <option value="list">列表</option>
                <option value="article">文章</option>
                <option value="link">链接</option>
                <option value="parentmenu">父菜单</option>
            </select>
        </div>
        <div class="form-group " v-bind:class="{'hidden':editedMenu.MenuType!='link'}">
            <label>网址</label>
            <input type="text" id="MenuName" name="MenuName" v-model="editedMenu.Url" class="form-control" />
        </div>
        <p>
            <button type="button" v-on:click="save" class="btn btn-success">保存</button>
            <button type="button" v-on:click="del" v-if="editedMenu.MenuId" id="btnDel" class="btn btn-danger">删除</button>
        </p>

    </div>
    <div style="clear:both;"></div>
</div>


<div id="sortArea">
    <div class="modal fade" id="mySortModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">拖动标题排序</h4>
                </div>
                <div class="modal-body" id="sortResult">
                    <ul class="list-group"></ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="submitSort();" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Scripts/jquery.treeview.js"></script>
    <script src="@Url.Content("~/Scripts/vue.js")"></script>
    <script src="@Url.Content("~/Scripts/vue-resource.min.js")"></script>
    <script>
        var menulist = [];
        var EditMenu = {};
        var vm = new Vue({
            el: '#editArea',
            data: {
                menulist: [],
                newMenu: {},
                editedMenu: EditMenu
            },
            init: function () {
                LoadAllMenu();
            },
            methods: {
                save: function () {
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("MenuEditApi")",
                        dataType: "json",
                        data: this.editedMenu,
                        success: function (result) {
                            console.log(JSON.stringify(result));
                            switch (result["state"]) {
                                case "success":
                                    bsAlert("保存成功！");
                                    LoadAllMenu();
                                    break;
                                case "error":
                                    bsAlert(result["msg"]);
                                    break;
                                default:
                                    break;
                            }
                        }
                    });
                },
                del: function (param) {                 
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("MenuDelApi")",
                        dataType: "json",
                        data: this.editedMenu,
                        success: function (result) {
                            switch (result["state"]) {
                                case "success":
                                    bsAlert("删除成功！");
                                    LoadAllMenu();
                                    
                                    break;
                                case "error":
                                    bsAlert(result["msg"]);
                                    break;
                                default:
                                    break;
                            }
                        }
                    });
                    this.editedMenu = {};
                }
            }
        })

        function creatMenuHtml(parentid) {
            var menuGroup = getMenuByParentid(parentid);
            var menuitem = "";
            menuitem += "<li><a onclick=\"add(" + parentid + ",this)\"><span class=\"file\">新增</span></a></li>";
            if (menuGroup.length > 0) {
                $.each(menuGroup, function (index, item) {
                    menuitem += "<li>";
                    if (item.MenuType == "parentmenu") {
                        menuitem += "<a onclick=\"edit(" + item.MenuId + ",this)\" ><span class=\"folder\">" + item.MenuName + "</span></a><a onclick=\"menuSort(" + item.MenuId + ",this)\"  class='btnSort glyphicon glyphicon-sort text-danger'>排序</a>";
                        menuitem += "<ul>";
                        menuitem += creatMenuHtml(item.MenuId);
                        menuitem += "</ul>";
                    }
                    else {
                        menuitem += "<a onclick=\"edit(" + item.MenuId + ",this)\" ><span class=\"file\">" + item.MenuName + "</span></a>";
                    }
                    menuitem += "</li>";
                })
            }
            return menuitem;
        }

        function edit(mid, obj) {
            EditMenu = getMenuByMenuid(mid);
            $("#editTitle").text("【" + EditMenu.MenuName + "】修改");
            vm.$set("editedMenu", EditMenu)
        }
        function add(pid, obj) {
            EditMenu = { ParentId: pid };
            var parentMenu = getMenuByMenuid(pid);
            $("#editTitle").text("【"+parentMenu.MenuName+"】添加子菜单");
            vm.$set("editedMenu", EditMenu)
        }

        function getMenuByParentid(pid) {
            var menuGroup = [];
            $.each(menulist, function (index, item) {
                if (item.ParentId == pid) {
                    menuGroup.push(item);
                }
            })
            return menuGroup;
        }
        function getMenuByMenuid(mid) {
            var menu = {};
            $.each(menulist, function (index, item) {
                if (item.MenuId == mid) {
                    menu = item;
                }
            })
            return menu;
        }

        function LoadAllMenu() {
            $.ajax({
                type: "POST",
                url: "@Url.Action("MenuListApi")",
                dataType: "json",
                success: function (result) {
                    menulist = result;
                    var menuRoot = creatMenuHtml(0);
                    $("#menulist").html(menuRoot);
                    $("#menulist").treeview();
                }
            });
        }


        function menuSort(mid, obj) {
            var menuGroup = getMenuByParentid(mid);
            if (menuGroup) {
                var listSort = "";
                $.each(menuGroup, function (index, item) {
                    listSort += "<li class=\"list-group-item sort\" data-pid=\"" + item.MenuId + "\">" + item.MenuName + "</li>";
                })
                $(".list-group").html(listSort);
            }
            $("#mySortModal").modal("show");

            $("#sortResult ul").sortable({
                opacity: 0.8, //设置拖动时候的透明度
                revert: true, //缓冲效果
                cursor: 'move' //拖动的时候鼠标样式
            });
        }

        function submitSort() {
            var jsonStr = "";
            $.each($(".sort"), function (index, item) {
                var pid = $(item).attr("data-pid");
                jsonStr += pid + "|" + index + "]";
            })
            $.ajax({
                type: "POST",
                url: "@Url.Action("MenuSort")",
                dataType: "json",
                data: "jsonStr=" + jsonStr,
                success: function (result) {
                    console.log(JSON.stringify(result));
                    switch (result["state"]) {
                        case "success":
                            bsAlert("排序成功！");
                            $("#mySortModal").modal("hide");
                            LoadAllMenu();
                            break;
                        case "error":
                            bsAlert(result["msg"]);
                            break;
                        default:
                            break;
                    }
                }
            });
        }

    </script>
}
